import { get, set } from 'lodash';
import { v1 as uuid } from 'uuid';
import { isParentNode } from '@/components/editor/utils/index';

export default {
  // models命名空间，需全局唯一
  namespace: 'layout',
  // models存储的数据store
  state: {
    dataCenter: {
      root: {
        id: 'root',
        type: 'div',
        props: {},
        sons: [],
        pid: null,
      },
    },
    focusId: '',
    dragHighlight: {
      pid: null,
      mode: null,
      id: null,
    },
  },
  // 更新store，用新数据合并state的旧数据
  reducers: {
    focus(state: any, { payload }: any) {
      state.focusId = payload;
      return { ...state };
    },
    addAppend(state: any, { payload }: any) {
      return { ...state, ...payload };
    },
    appendCom(state: any, { payload }: any) {
      const focusId = uuid();
      const { dataCenter } = state;
      const { item, hoverParentId, hoverIndex, data, positionDown } = payload;
      //非嵌套标签往父层插入
      if (!isParentNode(data.type)) {
        dataCenter[focusId] = { ...item, id: focusId, pid: hoverParentId };
        if (positionDown) {
          dataCenter[hoverParentId].sons.splice(hoverIndex + 1, 0, focusId);
        } else {
          dataCenter[hoverParentId].sons.splice(hoverIndex, 0, focusId);
        }
        state.focusId = focusId;
      } else {
        console.log('嵌套标签');
        dataCenter[focusId] = { ...item, id: focusId, pid: data.id };
        dataCenter[data.id].sons.push(focusId);
      }

      return { ...state };
    },
    moveCom(state: any, { payload }: any) {
      const { dataCenter } = state;
      function moveIndex(arr, index, tindex) {
        //如果当前元素在拖动目标位置的下方，先将当前元素从数组拿出，数组长度-1，我们直接给数组拖动目标位置的地方新增一个和当前元素值一样的元素，
        //我们再把数组之前的那个拖动的元素删除掉，所以要len+1
        if (index > tindex) {
          arr.splice(tindex, 0, arr[index]);
          arr.splice(index + 1, 1);
        } else {
          //如果当前元素在拖动目标位置的上方，先将当前元素从数组拿出，数组长度-1，我们直接给数组拖动目标位置+1的地方新增一个和当前元素值一样的元素，
          //这时，数组len不变，我们再把数组之前的那个拖动的元素删除掉，下标还是index
          arr.splice(tindex + 1, 0, arr[index]);
          arr.splice(index, 1);
        }
      }

      const {
        data,
        item,
        hoverParentId,
        hoverIndex,
        dragParentId,
        dragIndex,
        positionDown,
      } = payload;

      //非嵌套标签往父层插入
      if (!isParentNode(data.type)) {
        if (item.pid == hoverParentId) {
          moveIndex(dataCenter[hoverParentId].sons, dragIndex, hoverIndex);
        } else {
          // 1、删除原节点
          dataCenter[dragParentId].sons.splice(dragIndex, 1);
          // 2、插入新节点
          if (positionDown) {
            dataCenter[hoverParentId].sons.splice(hoverIndex + 1, 0, item.id);
          } else {
            dataCenter[hoverParentId].sons.splice(hoverIndex, 0, item.id);
          }
        }
      } else {
        //嵌套标签
        dataCenter[data.id].sons.push(item.id);
        //删除原节点
        dataCenter[dragParentId].sons.splice(dragIndex, 1);
      }

      state.focusId = item.id;
      return { ...state };
    },
    removeCom: (state: any, { payload }: any) => {
      const { dataCenter } = state;
      const { parentId, id } = payload;
      let index = dataCenter[parentId].sons.findIndex((son) => {
        return son === id;
      });

      function recursive(id) {
        if (dataCenter[id].sons && dataCenter[id].sons.length > 0) {
          dataCenter[id].sons.map((id) => {
            recursive(id);
            delete dataCenter[id];
          });
        }
        delete dataCenter[id];
      }
      recursive(id);
      dataCenter[parentId].sons.splice(index, 1);

      return {
        ...state,
      };
    },
    setDragHighlight(state: any, { payload }: any) {
      state.dragHighlight = payload;
      return { ...state };
    },
    updateFocusProps(state: any, { payload }: any) {
      return { ...state };
    },
  },
};
